<template>
  <view>
    <SearchTable ref="search" :config="config" :columns="columns"
                 :pagination="pagination" :loadData="loadData"/>
    <EditDialog ref="editDlg" :columns="columns" :rules="rules" :submit="onSubmit"
                :form-label-width="100" :is-show-dialog="false"/>
  </view>
</template>

<script setup lang="ts" name="realmList">

import router from "@/router";
import {useStore} from "@/stores";
import {loadPlatformPage, loadRealmByPage, saveRealm} from "@/apis";
import EditDialog from "@/components/common/EditDialog.vue";
import SearchTable from "@/components/common/SearchTable.vue";
import {onActivated, onDeactivated, onMounted, reactive, ref, toRaw} from "vue";
import {msgError, msgInfo} from "@/utils/InfoUtil";
import {View} from "@element-plus/icons-vue";
import {getStateOptions, getStateTag, getStateText} from "@/utils/SystemUtil";

const search = ref(null);
const editDlg = ref(null);
const currentItem = ref<any>();

const store = useStore()
const emits = defineEmits(['switchToPage']);

const rules = reactive({
  name: [{required: true, message: '请输入领域名称', trigger: ['blur', 'change']},],
})
const loadData = async (params: any) => {
  if (params.createTime && params.createTime.length === 2) {
    params.startTime = params.createTime[0];
    params.endTime = params.createTime[1];
    delete params.createTime;
  }

  const recentRealms: any = [];
  const result = await loadRealmByPage(params);
  if (result && result.data && result.data.data) {
    result.data.data.forEach((item: any) => {
      recentRealms.push({
        id: item.id,
        label: item.realmName,
        desc: item.realmName,
      });
    })
  }

  store.setRecentRealms(recentRealms);

  return result;
}

const onSubmit = async (item: Record<string, any>, editType: string) => {
  const result = await saveRealm(item);

  if (result.code === 0) {
    msgInfo('保存领域信息成功！');
    search.value?.refresh();
  } else {
    msgError(result.message);
  }

  return result;
}

const newRealm = () => {
  return {
    state: 1,
  };
}

const searchItems = [
  {
    type: 'input',
    name: 'realmName',
    label: '名称',
    size: 'default',
    placeholder: '请输入领域名称',
    clearable: true,
  },
  {
    type: 'date-range',
    subType: 'datetimerange',
    name: 'createTime',
    label: '创建时间',
    size: 'default',
    placeholder: '请选择',
    placeholders: [
      '开始时间', '结束时间'
    ],
    clearable: true,
    format: 'YYYY/MM/DD HH:mm:ss',
    valFormat: 'YYYY-MM-DD HH:mm:ss',
  }
]

const tableAction = [
  {type: 'primary', name: 'add', label: '新增', icon: 'Plus', action: () => {
      currentItem.value = newRealm();
      editDlg.value?.editAdd('新增平台', currentItem.value);
    } },
]

const pagination = ref({
  current: 1,
  pageSize: 10,
  total: 0,
});

const columns = ref([
  {
    id: 'id',
    name: '标识',
    hideCol: true,
    show: false,
    canEdit: false,
  },
  {
    id: 'realmName',
    name: '领域名称',
    sort: 'custom',
    show: true,
    action: (data: any, row: any, index: number) => {
      const realms = row;
      emits('switchToPage', realms);
      store.switchToRealms(toRaw(realms));
      router.push({
        path: '/realm'
      })
    }
  },
  {
    id: 'orgName',
    name: '组织名称',
    sort: 'custom',
    show: true,
  },
  {
    id: 'orgContact',
    name: '联系人',
    sort: 'custom',
    show: true,
  },
  {
    id: 'userUrl',
    name: '用户存取地址',
    show: true,
  },
  {
    id: 'state',
    name: '状态',
    show: true,
    tag: 'true',
    type: 'select',
    tagType: (tag: number) => { return getStateTag(tag); },
    tagText: (tag: number) => { return getStateText(tag); },
    options: getStateOptions()
  },
  {
    id: 'createTime',
    name: '创建时间',
    show: true,
    canEdit: false,
  },
  {
    id: 'operation',
    name: '操作',
    show: true,
    hideCol: true,
    canEdit: false,
    fixed: 'right',
    operations: [
      {
        name: '编辑',
        callback: (data: any, row: any, index: number) => {
          currentItem.value = row;
          editDlg.value?.editUpdate('编辑领域', row);
        }
      },
    ]
  }
]);

const config = ref<SearchConfig>({
  showSearch: true,
  search: searchItems,
  tableAction: tableAction,
  title: '领域列表',
  toolMode: 'right',
  setting: {
    showMoreSearch: false,
    showMoreButton: true,
    disableMoreButton: true,
    tableToolRound: '4px',
    showBorder: true,
    tableBorder: false,
  },
  layout: {
    buttonSize: 'default',
    actionButtonSize: 'default',
    inputSize: 'default',
  },
});

onMounted(() => {

})

onActivated(() => {
  if (!store.$state.listRealms) {
    router.push({
      path: store.$state.realmsPath
    })
  }
})

onDeactivated(() => {

})

</script>

<style scoped>
</style>
